<template>
    <view class="main">
		<!-- <div class="loading" v-if="loading">
			<u-loading :show="loading"  mode="flower" size="60"></u-loading>
		</div> -->
        <view class="">
            <view class="posr">
                <u-image :src="cous.image" width="100%" height="288rpx" border-radius="20">
                    <u-loading slot="loading"></u-loading>
                </u-image>
                <view class="content box box-pack-between box-align-center padd20">
                    <view class="" style="padding: 0 60rpx;">
                        <view class="title">
                            {{cous.name}}
                        </view>
                        <view class="zb">
                            主编：{{cous.material}}
                        </view>
                    </view>
                </view>
                <view class="cont-detail" @click="show =!show">
                    详情
                </view>
            </view>
            <view class="course-cont">
                <view class="cont-top box box-tb box-pack-start">
                    <view class="tabbar active">
                        课程学习
                    </view>
                    <view class="cnt">
                        共{{stageList.length}}章
                    </view>
                </view>

                <u-collapse :item-style="itemStyle">
                    <u-collapse-item :title="`第${stage.num}章   ${stage.title}`" v-for="(stage, indexs) in stageList"
                        :key="indexs">
                        <view class="">
                            <view class="box box-tb" v-for="(item, ind) in stage.sectionList" :key="ind">
                                <view class="box box-align-center box-pack-between slot-title">
                                    <view class="box box-align-center box-pack-start list" @click="goDetail(item,ind)">
                                        <view class="ml5 number" v-if="item.num <= 9">
                                            {{`0${item.num}`}}
                                        </view>
                                        <view class="ml5 number" v-else>
                                            {{`${item.num}`}}
                                        </view>
                                        <view class="box box-tb box-align-start box-pack-center ml10 context">
                                            <view class="times box box-align-start" style="font-size: 28rpx;">
                                                {{item.title}}
                                            </view>
                                            <view class="box box-align-center box-pack-start" v-if="item.time !=null">
                                                <u-image src="@/static/home/icon_mp4.png" width="31rpx" height="31rpx">
                                                    <u-loading slot="loading"></u-loading>
                                                </u-image>
                                               <view style="font-size: 26rpx;color: #888F9E;" class="ml5 mt5">
                                               	{{item.time}}
                                               </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>

                    </u-collapse-item>
                </u-collapse>
            </view>
            <u-popup v-model="show" mode="bottom" border-radius="20" length="75%">
                <view class="content">
                    <view class="tips active">
                        课程详情
                    </view>
                    <view style="padding: 33rpx 52rpx;">
                        <u-parse :html="cous.info" :selectable="true" :use-cache="true"></u-parse>
                    </view>
                </view>
            </u-popup>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				bj:uni.getStorageSync('clazz'),
				user:uni.getStorageSync("user"),
				stageList:[],
				cous:{
					image:'',
					name:'',
					material:''
				},
				loading: true,
				show:false
			}
		},
		onLoad(opt) {
			this.getKcrwInfo(opt.id);
			this.addCnt(opt.id)
		},
		methods: {
			//课程查看次数+1
			addCnt(id) {
				let opt = {
					url: "/ycouspublic/click",
					methods:'post'
				}
				let params = {
					cousid: id
				}
				this.$api.post(opt, params).then(res => {
					console.log(res);
				})
			},
			getKcrwInfo(id){
				let params = { cousid: id};
				this.$api.post({url: '/yclasscoustask/tjkc'}, params).then(res => {
                    console.log(res);
                    if(res.code == 0){
                        this.cous = res.info;
                        this.stageList = res.list;
                    }
				})
			},
			clickTabbar(index) {
				this.current = index
			},
			showComplete(item,planid,cousid,classid) {
			    uni.navigateTo({
			        url: `/pageHome/stuSort?sectionid=${item.id}&planid=${planid}&cousid=${cousid}&classid=${classid}`
			    })
			},
			//切换班级
			changeClass(id) {
				uni.setStorageSync('classId', id)
				uni.switchTab({
					url: "/pages/home/home"
				})
			},
			goStuSort(item) {
				uni.navigateTo({
					url: '/pageHome/stuSort'
				})
			},	
			goDetail(item,index) {
				uni.navigateTo({
					url: `/pageHome/chaperDetail?id=${item.id}`
				})
			}

		}
	}
</script>

<style scoped lang="scss">
    .main {
        height: 100%;
        position: relative;
        overflow-y: auto;
    }

    .a-title {
        padding-left: 40rpx;
        width: 540rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .chapter {
        padding: 20rpx;
    }

    .list {
        width: 450prx;
    }

    .context {
        width: 400rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .posr {
        position: relative;

        .cont-detail {
            position: absolute;
            top: 30rpx;
            right: 20rpx;
            width: 120rpx;
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            background: #F99115;
            box-shadow: 0px 2px 10rpx 0px rgba(182, 129, 39, 0.3);
            ;
            border-radius: 24rpx;
            color: #fff;
            font-size: 24rpx;
        }

        .content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 116rpx;
            background-color: rgba(46, 50, 61, .3);

            .title {
                font-size: 32rpx;
                font-weight: 600;
                color: #fff;
            }

            .zb {
                color: #fff;
                font-size: 26rpx;
            }

            .sort {
                width: 132rpx;
                height: 48rpx;
                line-height: 48rpx;
                background: #FEAA19;
                border-radius: 24rpx;
                color: #fff;
            }
        }
    }

    .cont-top {
        background-color: #fff;
        display: flex;
        width: 100%;
        // border-bottom: 2rpx solid #F0F1F8;


        .tabbar {
            padding-left: 40rpx;
            flex: 1;
            height: 80rpx;
            line-height: 80rpx;
            text-align: left;

            &.active:after {
                content: '';
                width: auto;
                width: 102rpx;
                height: 17rpx;
                background: #7C79F5;
                border-radius: 6rpx;
                display: block;
                margin-top: -32rpx;
                z-index: 111111;
            }
        }

        .cnt {
            margin-top: 20rpx;
            padding-left: 40rpx;
            height: 50rpx;
            line-height: 50rpx;
            background-color: #F4F6FA;
            color: #5F6572;
        }
    }

    .course-cont {
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: 0px 23px 46px 0px rgba(205, 207, 230, 0.18);
    }

    .slot-title {
        padding: 20rpx 40rpx;
        height: 100rpx;
        margin-top: 30rpx;
    }

    .index {
        font-size: 36rpx;
        color: #AEB8C;
    }

    .percent {
        color: #626BF1;
    }

    .percents {
        color: #626BF1;
    }

    .number {
        font-size: 36rpx;
        font-weight: blod;
        color: #AEB8CF;
    }

    .content {
        padding: 40rpx 0;
    }

    .tips {
        font-size: 36rpx;
        width: 100%;
        padding-left: 40rpx;
        height: 84rpx;
        line-height: 84rpx;
        text-align: left;

        &:after {
            content: '';
            width: auto;
            width: 144rpx;
            height: 17rpx;
            background: #7C79F5;
            border-radius: 6rpx;
            display: block;
            margin-top: -32rpx;
            z-index: 111111;
        }
    }

    .status {
        padding: 20rpx 37rpx;
        width: 636rpx;
        height: 100rpx;
        overflow: hidden;

        .ite {
            width: 100rpx;
        }

        .class-list {
            width: 430rpx;
            flex-wrap: wrap;

            .items {
                margin: 0 10rpx 10rpx 0;
                padding: 0 5rpx;
                width: auto;
                height: 32rpx;
                line-height: 32rpx;
                background: #FFFFFF;
                border: 1rpx solid #FDE6CB;
                border-radius: 4rpx;
                color: #F99115;
                font-size: 20rpx;
            }
        }

    }

    .times {
        font-size: 26rpx;
        color: #888F9E;
        width: 360rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
</style>
